const share = {
    props: {
        title: {
            type: String,
            default: 'Family Health'
        },
        isDetail: {
            type: Boolean,
            default: false
        },
        id: {
            type: String | Number,
            default: ''
        },
        type: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            shareData: [
                {
                    name: 'facebook',
                    img: './imgs/facebook.webp',
                    color: '#0866ff'
                },
                {
                    name: 'twitter',
                    img: './imgs/twitter.webp',
                    color: '#1da1f2'
                },
                {
                    name: 'snapchat',
                    img: './imgs/snapchat.webp',
                    color: '#fffc00'
                },
                {
                    name: 'linkedin',
                    img: './imgs/linkedin.webp',
                    color: '#0a66c2'
                }
            ]
        }
    },
    methods: {
        handleGetUrl(name) {
            const urlMap = {
                facebook: `https://www.facebook.com/sharer.php?t=${encodeURIComponent(this.title)}&u=https://www.thefamilyheath.com/${this.isDetail ? `detail.html?id=${this.id}` : ''}`,
                twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(this.title)}&url=https://www.thefamilyheath.com/${this.isDetail ? `detail.html?id=${this.id}` : ''}`,
                snapchat: `https://www.snapchat.com/scan?title=${encodeURIComponent(this.title)}&attachmentUrl=https://www.thefamilyheath.com/${this.isDetail ? `detail.html?id=${this.id}` : ''}`,
                linkedin: `https://www.linkedin.com/shareArticle?mini=true&title=${encodeURIComponent(this.title)}&utl=https://www.thefamilyheath.com/${this.isDetail ? `detail.html?id=${this.id}` : ''}`
            }
            return urlMap[name]
        }
    },
    template: `
    <div class="share">
        <div class="share-item" v-for="item in shareData" :style="{'--bg': item.color}">
            <a :href="handleGetUrl(item.name)">
                <img :src="item.img" :alt="item.name" width="30px">
            </a>
        </div>
    </div>
    `
}